<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/css/webSocketDemo.css}" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="title">用户多端登录踢出Demo</div>
    <div class="content">
        <div class="show-area"></div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script th:inline="javascript">
    $(function () {
        var lockReconnect = false; //避免重复连接
        var token = [[${token}]];
        $.cookie('token',token);
        var wsurl = 'ws://127.0.0.1:8080/websocketKeepOneLogin/' + token;
        var websocket;
        var i = 0;
        if (window.WebSocket) {
            doConnect();//连接
        }
        else {
            alert('该浏览器不支持web socket');
        }

        function reconnect() {
            if (lockReconnect) return;
            lockReconnect = true;
            //没连接上会一直重连，设置延迟避免请求过多
            setTimeout(function() {
                try {
                    doConnect();
                    lockReconnect = false;
                } catch (e) {
                    reconnect()
                }
            }, 2000);
        }

        function  doConnect() {
            websocket = new WebSocket(wsurl);
            //连接建立
            websocket.onopen = function (evevt) {
                console.log("Connected to WebSocket server.");
                $('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
            }
            //收到消息
            websocket.onmessage = function (event) {
                var token = event.data;//收到token信息
                //不相等，则将此页面跳转登录页
                if ($.cookie('token') != token) {
                    window.location = '/html/login.html';
                }
            }

            //发生错误
            websocket.onerror = function (event) {
                i++;
                console.log("Connected to WebSocket server error");
                $('.show-area').append('<p class="bg-danger message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
                //重连
                reconnect();
            }

            //连接关闭
            websocket.onclose = function (event) {
                i++;
                console.log('websocket Connection Closed. ');
                $('.show-area').append('<p class="bg-warning message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
                //断线重连
                reconnect();
                //window.location.hash = '#' + i;
            }
        }
    });
</script>
</body>
</html>